<template>
    <div>
        <el-tree ref="tree" class="common-tree" :style="style" :data="deptList" :props="defaultProps"
                 node-key="dept_id"
                 default-expand-all
                 :expand-on-click-node="false"
                 :highlight-current="true"
                 @node-click="handleNodeClick" />
    </div>
</template>

<script>
import {SelectAllTcontrolUnit} from '@/api/resourceManageApi';
import {handleTree} from '@/util';

export default {
    name: 'CrossingSelect',
    props: {

    },
    data() {
        return {
            deptList: [],
            defaultProps: {
                children: 'children',
                label: 'dept_name'
            }
        };
    },
    computed: {
        style: function() {
            return 'height:100%;background:transparent;';
        }

    },
    watch: {

    },
    mounted() {
        this.loadRemoteData();
    },
    methods: {
        loadRemoteData() {
            SelectAllTcontrolUnit().then(res => {
                this.isLoading = false;
                console.log(res);
                let list = res.res.Dept;
                list[0].parent_id = 0;

                this.deptList = handleTree(list, 'dept_id', 'parent_id', 'children', 0);

                this.$emit('update:deptList', this.deptList);

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleNodeClick(data, node) {
            this.$emit('node-click', data);
        }

    }
};
</script>

<style scoped>
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 11;
    }
    .common-tree {
        overflow: auto;
    }
    .tree-select {
        z-index: 111;
    }
    /deep/
    .tree-select .el-select__tags {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    /deep/
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: #415284;
        color: #fff;
    }

</style>
